<template>
  <div>
    <el-form ref="formGoods" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-contents">选择分类</div></el-col>
        <el-col :span="18">
          <div class="form-contents">
            <el-form-item label="商品分类" prop="goods_first_sort">
              <el-cascader
                  :options="options2"
                  @active-item-change="handleItemChange"
                  @change="getSelectValue"
                  :props="props"
                  size="medium"
              ></el-cascader>
            </el-form-item>
          </div>    
        </el-col> 
      </el-row>
      <el-row :gutter="20">
      <el-col :span="6">
          <div class="form-contents">基本信息</div>
      </el-col>
      <el-col :span="18">
        <div class="form-contents">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品单位" prop="goods_unit">
            <el-input v-model="form.goods_unit"></el-input>
          </el-form-item>
          <el-form-item label="商品排序">
            <el-input v-model="form.goods_sort_id"></el-input>
          </el-form-item>
          <el-form-item label="已出售量">
            <el-input v-model="form.goods_have_saled"></el-input>
          </el-form-item>
          <el-form-item label="限购数量">
            <el-input v-model="form.goods_limit_buy"></el-input>
          </el-form-item>
          <el-form-item label="重量">
            <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="封面图" class="row">
            <el-upload
            action="http://localhost:8089/upload/addimg"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleUpload"
            :on-remove="handleRemove"
            :limit="1">
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="商品详情图" class="row">
            <el-upload
              action="http://localhost:8089/upload/addimg"
              list-type="picture-card"
              :limit="5"
              :on-preview="handlePictureCardPreview"
              :on-success="handleUploads"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
            <el-form-item label="售价" prop="goods_sell_price">
              <el-input v-model="form.goods_sell_price"></el-input>
            </el-form-item>
            <el-form-item label="成本价" prop="goods_cost_price">
              <el-input v-model="form.goods_cost_price"></el-input>
            </el-form-item>
            <el-form-item label="原价" prop="goods_original_price">
              <el-input v-model="form.goods_original_price"></el-input>
            </el-form-item>
            <el-form-item label="服务内容">
              <el-input v-model="form.goods_service_content"></el-input>
            </el-form-item>
            <el-form-item label="单品满件包邮">
              <el-input v-model="form.goods_single_postage"></el-input>
            </el-form-item>
            <el-form-item label="单品满额包邮">
              <el-input v-model="form.goods_sale_postage"></el-input>
            </el-form-item>
            <el-form-item label="产品详解">
              <el-input type="textarea" v-model="form.goods_detail_explain"></el-input>
            </el-form-item>
          </div>
        </el-col> 
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-contents">库存规格</div>
        </el-col>
        <el-col :span="18">
          <div class="form-contents">
            <el-form-item label="商品库存" prop="goods_stock">
              <el-input v-model="form.goods_stock"></el-input>
            </el-form-item>
            <el-form-item label="商品货号">
              <el-input v-model="form.goods_id"></el-input>
            </el-form-item>
          </div>
        </el-col> 
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-contents">营销</div>
        </el-col>
        <el-col :span="18">
          <div class="form-contents">
            <el-form-item label="积分抵扣">
              <el-input v-model="form.goods_integration_dudection"></el-input>
            </el-form-item>
            <el-form-item label="积分赠送" prop="goods_integration_give">
              <el-input v-model="form.goods_integration_give"></el-input>
            </el-form-item>  
          </div>  
        </el-col> 
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
            <div class="form-contents">图文</div>
        </el-col>
        <el-col :span="18">  
          <Markdown class="editor" :value="content"  :setting="editorSetting" @input="contentUe"></Markdown>   
        </el-col> 
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">       
        </el-col>
        <el-col :span="18">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即添加</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-col> 
      </el-row> 
    </el-form>
  </div>

</template>


<script>
import Markdown from "@/components/Markdown.vue";
export default {
  data() {
    return {
      content: "我是富文本编辑器的内容",
      editorSetting: {
        height: 400
      },
      dialogVisible: false,
      dialogImageUrl: "https://www.yteris.com/image/0.0034113307761938216.jpg",
      form: {
        goods_name: "",
        goods_unit: "",
        goods_sort_id: "",
        goods_sort_first: "",
        goods_sort_second: "",
        goods_have_saled: 0,
        goods_limit_buy: 0,
        goods_weight: "",
        goods_cover_img: "",
        goods_detail_img: [],
        goods_sell_price: 0,
        goods_cost_price: 0,
        goods_original_price: 0,
        goods_service_content: "",
        goods_single_postage: "",
        goods_sale_postage: "",
        goods_detail_explain: "",
        goods_stock: "",
        goods_id: "",
        goods_integration_dudection: "",
        goods_integration_give: 0,
        goods_detail_introduce: "",
        goods_sale_status:false,
        goods_show_position:'normal'
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        goods_unit: [
          { required: true, message: "请输入商品单位", trigger: "blur" }
        ],
        goods_sort_first: [
          { required: true, message: "请选择分类", trigger: "change" }
        ],
        goods_have_saled: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_limit_buy: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_sell_price: [
          { required: true, message: "请输入售价", trigger: "blur" }
        ],
        goods_cost_price: [
          { required: true, message: "请输入成本价", trigger: "blur" }
        ],
        goods_original_price: [
          { required: true, message: "请输入原价", trigger: "blur" }
        ],
        goods_service_content: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_single_postage: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_sale_postage: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_detail_explain: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ],
        goods_stock: [
          { required: true, message: "请填写库存", trigger: "blur" }
        ],
        goods_integration_dudection: [
          { required: true, message: "请选择活动区域", trigger: "blur" }
        ]
      },
      options2: [
        {
          label: "水果生鲜",
          cities: []
        },
        {
          label: "特色美食",
          cities: []
        }
      ],
      fruit: [{ label: "橘子" }, { label: "苹果" }, { label: "雪梨" }],
      props: {
        value: "label",
        children: "cities"
      }
    };
  },
  components: {
    Markdown
  },
  methods: {
    onSubmit() {
      let _this = this;
      this.$refs.formGoods.validate(valid => {
        if (valid) {
          console.log(valid)
          alert("submit!");
          console.log(_this.form);
          _this.$http.post('/goods/addgoods',_this.form)
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlePictureCardPreview() {},
    handleRemove() {},
    handleUploads(response, file, fileList){
        console.log(response);
        console.log(file);
        console.log(fileList);
        let imgList=[];
        for(let i=0;i<fileList.length;i++){
           imgList.push(fileList[i].response.data)
        }
        this.form.goods_detail_img=imgList;
    },
    handleUpload(response, file, fileList){
        console.log(response);
        console.log(file);
        console.log(fileList);
        this.goods_cover_img=response.data;
    },
    contentUe(e) {
      this.content = e;
      this.form.goods_detail_introduce = this.content;
    },
    handleItemChange(val) {
      let _this = this;
      console.log("active item:", val[0]);
      setTimeout(() => {
        for (let i = 0; i < _this.options2.length; i++) {
          if (_this.options2[i].label.indexOf(val[0]) > -1) {
            _this.options2[i].cities = [];
            for (let j = 0; j < _this.fruit.length; j++) {
              _this.options2[i].cities.push(_this.fruit[j]);
            }
          }
        }
      }, 300);
    },
    getSelectValue(val) {
      console.log(val);
      this.form.goods_sort_first = val[0];
      this.form.goods_sort_second = val[1] ? val[1] : "";
    }
  }
};
</script>


<style lang="less" scoped>
.el-col {
  margin-bottom: 20px;

  height: 100%;
}
.el-row {
  height: 100%;
  background: #fff;
}
.form-contents {
  padding: 20px;
  border: 1px solid #bdbdbd;
  font-weight: bold;
  border-radius: 8px;
}
.el-form-item {
  width: 60%;
}
</style>


